<template>
    <div class="mv">
        <div class="mv-header">
            <div class="video-title">
                <i class="iconfont icon-mv"></i>
                <span class="name">{{ mvdata.name }}</span><span class="arname">{{ mvdata.artistName }}</span>
            </div>
            <div class="video-publishTime">发布日期：{{ mvdata.publishTime }}</div>
        </div>
        <div class="video-box">
            <video :src="options.src" @play="playVideo" autoplay :controls="true"
                style="width: 100%; height: 100%;"></video>
            <!-- <vue3VideoPlay v-bind="options" :poster="mvdata.cover" @play="playVideo" /> -->
        </div>
        <div class="video-info">
            <div class="infon-sjk">
                <div class="ifon-sjkitem">
                    <!-- 播放 -->
                    <el-button type="primary" plain class="sjk">
                        <i class="iconfont icon-bofang"></i>
                        <span>播放：{{ mvdata.playCount }}</span>
                    </el-button>
                </div>
                <div class="ifon-sjkitem">
                    <!-- 收藏 -->
                    <el-button type="primary" plain class="sjk">
                        <i class="iconfont icon-shoucang"></i>
                        <span>收藏：{{ mvdata.subCount }}</span>
                    </el-button>
                </div>
                <div class="ifon-sjkitem">
                    <!-- 分享 -->
                    <el-button type="primary" plain class="sjk">
                        <i class="iconfont icon-31zhuanfa"></i>
                        <span>分享：{{ mvdata.shareCount }}</span>
                    </el-button>
                </div>
            </div>
            <div class="desc" v-if="mvdata.desc">
                <h4>MV描述：</h4>
                {{ mvdata.desc }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { usePlayStatus } from '@/stores/playlist'
import { getMvDetail, getMvUrl } from '@/api/mv'

const mvdata = ref({
})
const route = useRoute()
const playStatus = usePlayStatus()
const options = ref({
    width: '100%', //播放器高度
    height: '600px', //播放器高度
    color: "#409eff", //主题色
    title: '', //视频名称
    src: "", //视频源
    muted: false, //静音
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: false, //自动播放
    loop: true, //循环播放
    mirror: false, //镜像画面
    ligthOff: false,  //关灯模式
    volume: 1, //默认音量大小
    control: true, //是否显示控制
    controlBtns: ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
})

onMounted(async () => {
    const res = await getMvDetail(route.query.id)
    console.log(res);
    options.value.title = res.data.name
    const res2 = await getMvUrl(route.query.id)
    options.value.src = res2.data.url
    mvdata.value = res.data
})


const playVideo = () => {
    playStatus.playStatus = false
}


</script>

<style scoped lang="less">
.mv {
    margin: 40px auto;
    height: 400px;

    .mv-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .video-title {
            font-size: 25px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;

            i {
                font-size: 30px;
            }

            .name {
                margin-right: 10px;
            }

            .arname {
                font-size: 15px;
                color: #999;
            }
        }

        .video-publishTime {
            font-size: 15px;
            color: #999;
            font-weight: bold;
        }
    }

    .video-info {
        margin-top: 20px;

        .infon-sjk {
            display: flex;
            justify-content: space-around;
            align-items: center;

            .ifon-sjkitem {
                margin-right: 20px;
            }
        }

        .desc {
            h4 {
                margin-top: 20px;
                font-size: 15px;
                color: #999;
                font-weight: bold;

            }

            font-size: 15px;
            color: #000000;
            line-height: 30px;
        }
    }
}
</style>